<!DOCTYPE html>
<html ng-app="testApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Angular JavaScript Demo</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div class="container">
    <div ng-controller="exprController">
        <input type="text" ng-model="name">{{name|uppercase}}<br>
    </div>
    <div ng-controller="insertContrller">
        <input type="email" ng-model="to" placeholder="Recipient">
        <textarea ng-model="emailBody"></textarea>
        <pre>{{previewText}}</pre>
    </div>
    <div ng-controller="formController">
        <form name="angularJsForm" novalidate ng-submit="">
            <fieldset>
                <legend>sign_up form</legend>
                <div class="row">
                    <div class="large-12 columns">
                        <label>Your Name</label>
                        <input type="text" name="name" placeholder="name"
                        ng-model="signup.name" ng-minlength="3" ng-maxlength="12"
                        required="true">
                    </div>
                    <div class="error" ng-show="angularJsForm.name.$dirty
                    &&angularJsForm.name.$invalid">
                        <small class="error" ng-show="angularJsForm.name.$error.required">
                            Your Name is Required
                        </small>
                        <small class="error" ng-show="angularJsForm.name.$error.minlength">
                            Your Name is required to be at least 3 characters
                        </small>
                        <small class="error" ng-show="angularJsForm.name.$error.maxlength">
                            Your Name cannot to be longger than 20 characters
                        </small>
                    </div>
                </div>
                <button type="submit" ng-disabled="angularJsForm.$invalid" class="btn btn-primary btn-sm">Submit</button>
            </fieldset>
        </form>
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('testApp',[]);
    //解析表达式
    app.controller('exprController',function($scope,$parse){
      //监控并解析表达式
      $scope.$watch("name",function(newVal,oldVal,scope){
        //debugger
        if(newVal!=oldVal){
            var parseFun = $parse(newVal);
            $scope.parsedValue = parseFun(scope);
        }
      });
    });
    //插值
    app.controller("insertContrller",function($scope,$interpolate){
        $scope.$watch('emailBody',function(body){
        if(body){
            var template = $interpolate(body);
            $scope.previewText = template({
                to:$scope.to
            });
        }
        });
    });
    //表单校验
    app.controller("formController",function($scope){

    });
</script>
<style type="text/css">
    body {
      background-color: #fff;
      border-top: 5px solid #3399cc;
    }

    html {
      background: #fff;
    }

    .row {
      border: 0px solid green;
    }

    input.ng-invalid {
      border: 1px solid red;
    }

    input.ng-valid {
      border: 1px solid green;
    }
</style>
</body>
</html>